<template>
  <el-container class="dcs-main-container" >
    <transition name="el-fade-in-linear">
      <el-aside class="real-aside" width="350px" v-show="showAside">
        <el-row>
          <el-select style="width: 100%" v-model="orgQuery.module_name" placeholder="请选择模块" @change="changeModule">
            <el-option v-for="(item, index) in reportLists" :key="index" :label="item.cn_name" :value="item.en_name" />
          </el-select>
        </el-row>
        <div style="margin-bottom: 10px"></div>
        <el-row style="height: 40px">
          <el-input prefix-icon="el-icon-search" style="width:100%" v-model="orgQuery.name" placeholder="关键字搜索"></el-input>
        </el-row>
        <div style="margin-bottom: 10px"></div>
        <el-row>
          <el-tree v-loading="treeLoading" class="dcs-left-tree"  ref="OrganizeTreeRef" :filter-node-method="filterNode" :data="OrganizeTree"
                       :props="treeProps" node-key="id" default-expand-all  show-checkbox :close-on-click-modal="false" @check="treeCheck">
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>
                <span v-if="data.type==OrgnizeType.ANCESTOR" class="mgl-10"><span class="tenant-title">{{ data.name }}</span><el-tag type="info" size="mini">集团</el-tag></span>
                <span v-else-if="data.type==OrgnizeType.AREA" class="mgl-10"><span class="area-title">{{ data.name }}</span><el-tag type="info" size="mini">区域</el-tag></span>
                <span v-else-if="data.type==OrgnizeType.FACTORY" class="mgl-10"><span class="company-title">{{ data.name }}</span><el-tag v-if="data.sub_title" type="info" size="mini">公司({{ data.sub_title }})</el-tag></span>
                <span v-else-if="data.type==OrgnizeType.DEPARTENT" class="mgl-10"><span class="department-title">{{ data.name }}</span><el-tag type="info" size="mini">部门</el-tag></span>
              </span>
            </span>
          </el-tree>
        </el-row>
      </el-aside>
    </transition>
    <transition name="fade" mode="out-in">
      <keep-alive :include='cachedViews'>
        <router-view ref="base_child" :key="key"></router-view>
      </keep-alive>
    </transition>
    <el-backtop :bottom="100" :right="10" :visibility-height="200"></el-backtop>
  </el-container>
</template>

<script>
  import orgnizeApi from '@/api/orgnization'
  import {OrgnizeType } from '@/utils/constants'
  import debounce from 'lodash/debounce'
  import { getItem } from '@/utils/storage'
  export default {
    name: "bigdata-report",
    data(){
      return {
        orgQuery:{
          name:'',
          type:'',
          module_name:'',
          orgnization_ids:[]
        },
        showAside:true,
        treeLoading:false,
        ownedFacOrgs:[],
        ownedFodOrgs:[],
        ownedTransOrgs:[],
        OrganizeTree: [],
        reportLists:[],
        OrgnizeType,
        treeProps: {
          label: 'name',
          children: 'children'
        },
      }
    },
    computed:{
      cachedViews() {
        return this.$store.state.tagsView.cachedViews
      },
      key() {
        return this.$route.path
      }
    },
    watch: {
      'orgQuery.name': debounce(function(val) {
        this.$refs.OrganizeTreeRef.filter(val)
      }, 600)
    },
    created() {
      const ownedOrgs = JSON.parse(getItem('orgnizes'))
      this.ownedFacOrgs = ownedOrgs.filter(org=>org.is_food===2).map(org=>org.id)
      this.ownedFodOrgs = ownedOrgs.filter(org=>org.is_food===1).map(org=>org.id)
      this.ownedTransOrgs = ownedOrgs.filter(org=>org.is_food===3).map(org=>org.id)
      this.reportLists = JSON.parse(getItem('reports'))
      this.orgQuery.module_name = this.reportLists[0].en_name
      if (this.$route.path === '/bigdata/report/chart'){
        this.reportLists=[
          {cn_name:'电厂经营图表',en_name:'factory',type:'electricity'},
          {cn_name:'餐厨经营图表',en_name:'food',type:'food'}
        ]
      }
      this.orgQuery.module_name = this.reportLists[0].en_name
      this.orgQuery.type = this.reportLists[0].type
      if (this.orgQuery.type==='electricity')
        this.orgQuery.orgnization_ids = this.ownedFacOrgs
      else if(this.orgQuery.type==='food')
        this.orgQuery.orgnization_ids = this.ownedFodOrgs
      else
        this.orgQuery.orgnization_ids = this.ownedTransOrgs
      this.fetchData()
    },
    methods:{
      controlAside(show){
        this.showAside = show
        this.$refs['base_child'].toggleIcon = show?'el-icon-d-arrow-left':'el-icon-d-arrow-right'
      },
      loadTreeWithType(type){
        this.orgQuery.type = type
        const allOrgs = [...this.ownedFacOrgs,...this.ownedFodOrgs,...this.ownedTransOrgs]
        if (type==='electricity')
          this.orgQuery.orgnization_ids = this.ownedFacOrgs
        else if (type==='food')
          this.orgQuery.orgnization_ids = this.ownedFodOrgs
        else if(type==='transport')
          this.orgQuery.orgnization_ids = this.ownedTransOrgs
        else
          this.orgQuery.orgnization_ids = allOrgs
        this.fetchData()
      },
      async fetchData() {
        this.treeLoading = true
        const params = {type:this.orgQuery.type}
        orgnizeApi.orgnizeTree(params).then(res=>{
          this.OrganizeTree=res.data
          setTimeout(()=>{
            this.orgQuery.orgnization_ids.forEach(value=>{
              this.$refs.OrganizeTreeRef.setChecked(value, true, false)
            })
            this.treeLoading = false
          },100)
        })
      },
      filterNode(value, data) {
        if (!value) return true
        if(typeof value === 'string')
          return data.name.indexOf(value) !== -1
        else
          return value>2?data.is_food>=0:data.is_food === value
      },
      changeModule(val){
        const powerStats = this.reportLists.filter(pst=>pst.en_name===val)
        if (!powerStats.length)
          return
        this.loadTreeWithType(powerStats[0].type)
        this.$refs['base_child'].factorysSelected(this.orgQuery)
      },
      treeCheck(row,data){
        const checkNodes = data.checkedNodes
        const factoryIds = checkNodes.filter(node=>node.type==='factory').map(fac=>fac.id)
        this.orgQuery.orgnization_ids = factoryIds
        this.$refs['base_child'].factorysSelected(this.orgQuery)
      }

    }

  }
</script>

<style lang="scss">
  @import 'src/styles/variables.scss';
  .tenant-title{
    font-size: small;
    color:$tenant-color;
    margin-right: 10px;
  }
  .area-title{
    font-weight: lighter;
    color: $area-color;
    font-size: small;
    margin-right: 10px;
  }
  .company-title{
    font-weight: lighter;
    color: $company-color;
    font-size: small;
    margin-right: 10px;
  }
  .department-title{
    font-weight: lighter;
    color: $department-color;
    font-size: small;
    margin-right: 10px;
  }
  .dcs-main-container{
    width: 100%;
    min-height: calc(100vh - 84px);

    .real-aside{
      margin-bottom: 0;
      max-height:calc(100vh - 84px);
      overflow-y: auto;

      .el-tree{
        min-height: calc(100vh - 204px);
        padding-top: 10px;
        padding-bottom: 50px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
      }

      .el-tree>.el-tree-node{
        display: inline-block;
        min-width: 100%;
      }

    }


  }


</style>
